<template>
  <div class="tabs-box mt20">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="专业概述" name="majorsummarize">
        <div class="sketch-info">
          <div class="sketch">
            <div class="left-img">
              <img src="../../assets/images/leve.png" alt="" />
            </div>
            <div class="right-info">
              <div>{{ get(majordetailData, 'eduLevelName', '-') }}</div>
              <div class="item f14">学历层次</div>
            </div>
          </div>
          <div class="sketch">
            <div class="left-img">
              <img src="../../assets/images/year.png" alt="" />
            </div>
            <div class="right-info">
              <div>{{ get(majordetailData, 'learnYearArab', '-') }}</div>
              <div class="item f14">修业年限</div>
            </div>
          </div>
          <div class="sketch f14">
            <div class="left-img">
              <img src="../../assets/images/xuewei.png" alt="" />
            </div>
            <div class="right-info">
              <div>{{ get(majordetailData, 'degree', '-') }}</div>
              <div class="item f14">授予学位</div>
            </div>
          </div>
          <div class="sketch">
            <div class="left-img">
              <img src="../../assets/images/bili.png" alt="" />
            </div>
            <div class="right-info">
              <div>
                {{ get(majordetailData, 'maleRatio', '-') }} :
                {{ get(majordetailData, 'femaleRatio', '-') }}
              </div>
              <div class="item f14">男女比例</div>
            </div>
          </div>
        </div>

        <!-- 专业介绍 -->
        <div class="item-box" v-if="treeActiveName == 'benke'">
          <mytitlebar title="专业介绍" />
          <div class="f14" style="color: #666">
            {{ get(majordetailData, 'introduction', '-') }}
          </div>
        </div>

        <!-- 培养目标 -->
        <div class="item-box">
          <mytitlebar title="培养目标" />
          <div class="f14" style="color: #666">
            {{ get(majordetailData, 'eduObjective', '-') }}
          </div>
        </div>

        <!--  培养要求 -->
        <div class="item-box">
          <mytitlebar
            :title="treeActiveName == 'benke' ? '培养要求' : '实习实训'"
          />
          <div class="f14" style="color: #666">
            {{
              get(
                majordetailData,
                'eduRequirement',
                get(majordetailData, 'internshipDesc', '-')
              )
            }}
          </div>
        </div>

        <!-- 学科要求 -->
        <div class="item-box">
          <mytitlebar
            :title="treeActiveName == 'benke' ? '学科要求' : '职业资格证书举例'"
          />
          <div class="f14" style="color: #666">
            {{
              get(
                majordetailData,
                'subjectRequirement',
                get(majordetailData, 'certExample', '-')
              )
            }}
          </div>
        </div>

        <!-- 知识能力 -->
        <div class="item-box">
          <mytitlebar title="知识能力" />
          <div
            class="f14"
            style="color: #666; white-space: pre-wrap"
            v-html="get(majordetailData, 'loreAndAbility', '-')"
          ></div>
        </div>

        <!-- 考研方向 -->
        <div class="item-box">
          <mytitlebar
            :title="treeActiveName == 'benke' ? '考研方向' : '专升本方向'"
          />
          <div class="f14" style="color: #666">
            <template v-if="treeActiveName === 'benke'">
              {{ get(majordetailData, 'studyDirection', '-') }}
            </template>
            <template v-else-if="treeActiveName === 'zhuanke'">
              {{ get(majordetailData, 'zhuanToBenOrient', '-') }}
            </template>
            <template v-else>-</template>
          </div>
        </div>

        <!-- 主要课程 -->
        <div class="item-box">
          <mytitlebar title="主要课程" />
          <div class="f14" style="color: #666">
            {{ get(majordetailData, 'mainCourse', '-') }}
          </div>
        </div>

        <!-- 社会名人 -->
        <div class="item-box" v-if="treeActiveName == 'benke'">
          <mytitlebar title="社会名人" />
          <div class="f14" style="color: #666">
            {{ get(majordetailData, 'famousScholar', '-') }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="就业前景" name="third">
        <div class="education">
          <mytitlebar title="就业方向" />
          <div class="ttx">
            {{ get(majordetailData, 'jobDirection', '-') }}
          </div>
        </div>
        <div class="education">
          <div class="job-list-container">
            <div
              class="job-list-item"
              v-for="(item, index) in IndustryType"
              :key="index"
              :class="{
                active: current == index,
                disabled: item.jobName == '其它',
              }"
              @click="item.jobName !== '其它' && jobChange(item, index)"
            >
              <p class="job-name text-overflow-ellipsis">
                {{ item.jobName }}
              </p>
              <div class="job-info">
                <div class="job-text">
                  <span>就业</span>
                  <span>占比</span>
                </div>
                <div class="job-ratio">
                  {{ Math.round(item.ratio * 100) }}
                  <span class="f12">%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="education">
          <mytitlebar title="学历要求" />
          <div class="education-echarts-box">
            <!-- 环形饼图容器 -->
            <div
              style="
                flex: 1;
                width: 100%;
                height: 320px;
                display: flex;
                justify-content: center;
              "
            >
              <EChartWrapper :type="'pie'" :options="pieChartOptions" />
            </div>

            <!-- 堆积柱状图容器 -->
            <div style="flex: 1; width: 100%; height: 320px">
              <EChartWrapper :type="'bar'" :options="barChartOptions" />
            </div>
          </div>
        </div>
        <div class="education">
          <div style="display: flex; justify-content: space-between">
            <mytitlebar title="人才要求" />
            <el-select
              v-model="cityValue"
              placeholder="全国"
              size="large"
              style="width: 100px"
              @change="changeCity"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="education-echarts-box">
            <!-- 环形饼图容器 -->
            <div style="width: 100%; height: 320px">
              <div
                style="
                  text-align: center;
                  font-size: 20px;
                  color: #333;
                  margin-bottom: 20px;
                  font-weight: bold;
                "
              >
                <span v-html="formattedRecruit"></span>
              </div>
              <EChartWrapper :type="'line'" :options="lineChartOptions" />
            </div>

            <!-- 堆积柱状图容器 -->
            <div style="width: 100%; height: 320px">
              <div
                style="
                  text-align: center;
                  font-size: 20px;
                  color: #333;
                  margin-bottom: 20px;
                  font-weight: bold;
                "
              >
                {{ salary.split('：')[0] }}:<span style="color: red">{{
                  salary.split('：')[1]
                }}</span>
              </div>
              <EChartWrapper :type="'boxplot'" :options="boxplotOptions" />
            </div>
          </div>
        </div>
        <div class="view-introduction" @click="look">查看完整介绍</div>
      </el-tab-pane>
      <el-tab-pane label="开设院校" name="second">
        <schoolDate
          ref="schoolDateinfo"
          :studentId="requestData.studentId"
          :storeType="2"
        ></schoolDate>
        <div class="table-box" style="margin-top: 20px">
          <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column prop="rank" label="专业排名" />
            <el-table-column label="院校信息" width="300">
              <template #default="scope">
                <div style="font-weight: bold">
                  {{ get(scope.row, 'cnName', '-') }}
                </div>
                <span
                  class="f12"
                  v-for="item in scope.row.features"
                  :key="item"
                  >{{ item }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="address" label="所在地">
              <template #default="scope">
                {{ get(scope.row, 'provinceName', '-') }}&nbsp;{{
                  get(scope.row, 'cityName', '-')
                }}
              </template>
            </el-table-column>
            <el-table-column prop="natureTypeName" label="性质">
              <template #default="scope">
                {{ natureTypeName(scope.row.natureType) }}
              </template>
            </el-table-column>
            <el-table-column prop="belong" label="类型">
              <template #default="scope">
                {{ scope.row.categories[0] || '-' }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="学科评估" /> -->
            <el-table-column prop="hits" label="报考热度">
              <template #default="scope">
                {{ formatHits(scope.row.hits) }}
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-bottom: 30px">
            <el-pagination
              :current-page="requestData.page"
              :page-size="requestData.pageSize"
              :page-sizes="[10, 20, 30]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <Drawertool ref="drawertoolRef" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import {
  getSearchMajorSchool,
  searchMajorJob,
  careerNeedEdu,
  careerNeed,
  searchSchoolFilter,
} from '@/api/appv2/appv1.js';
import mytitlebar from '../MyTitleBar.vue';
import schoolDate from '@/views/leader/volunteer/module/schoolDate.vue'; // 学校
import userSearch from '@/store/modules/searchInfoMajorTool.js';
import EChartWrapper from '@/components/ECharts';
import * as echarts from 'echarts';
import Drawertool from '../Drawertool';
const drawertoolRef = ref(null);
const current = ref(0);
const IndustryType = ref([]);
const recruit = ref('');
const salary = ref('');
const cityValue = ref('');
const pieChartOptions = ref({});
const barChartOptions = ref({});
const emit = defineEmits(['changeTab']);
const options = ref([]);
const changeItem = ref({});
const lineChartOptions = ref({});
const boxplotOptions = ref({});
import { get } from 'lodash';
const personnelData = ref({
  code: '',
  provinceCode: '0',
});
const props = defineProps({
  majordetailData: {
    type: Object,
    default: () => {},
  },
  majorCode: {
    type: String,
    default: '',
  },
});

const userSearchVal = userSearch(); // 筛选仓库
let userSearchDate = computed(() => userSearchVal.searchArraylist); // 筛选数据
const total = ref(0);
const tableData = ref([]);
const activeName = ref('majorsummarize');
const treeActiveName = ref('benke');
const screenData = ref({}); // 筛选数据
// 请求数据
const requestData = reactive({
  studentId: localStorage.getItem('student_id') * 1,
  batch: '',
  page: 1,
  code: props.majorCode,
  pageSize: 10,
  fronttype: 3,
  fType: 0, // 0-全部
  hasZJ: 0, // 0-全部
  order: '', // 排序 chance-录取率 rank-院校排名 planNum-招生计划
  is_sort: false, // 是否升序，false升序，true降序
});

const natureTypeName = (val) => {
  switch (val) {
    case 'public':
      return '公办';
    case 'private':
      return '民办';
    case 'aw_ga':
      return '中外/港澳';
  }
};

//就业前景
const getMajorJob = () => {
  searchMajorJob({
    code: props.majorCode,
  }).then((res) => {
    if (res.code == 20000) {
      IndustryType.value = res.data;
      getEducation(get(res.data, '[0].jobCode', '0'));
      getPersonnel(get(res.data, '[0].jobCode', '0'));
    }
  });
};
const formattedRecruit = computed(() => {
  const parts = recruit.value.split('：');
  const prefix = parts[0]; // 获取冒号前的部分
  let content = parts[1]; // 获取冒号后的部分

  if (content) {
    // 处理内容，排除最后一个字符或包含"人"的字符
    let formattedContent = '';
    const contentLength = content.length;

    // 遍历content中的字符
    for (let i = 0; i < contentLength; i++) {
      const char = content[i];

      // 如果是最后一个字符，或字符为 '人'，不加红色
      if (i === contentLength - 1 || char === '人') {
        formattedContent += char;
      } else {
        formattedContent += `<span style="color: red">${char}</span>`;
      }
    }

    // 返回拼接的完整字符串
    return `${prefix}：${formattedContent}`;
  }
  return recruit.value; // 如果没有冒号后的内容，返回原始字符串
});
getMajorJob();
//获取省份
const getProvince = () => {
  searchSchoolFilter({}).then((res) => {
    const provinceObj = res.data.province;
    const provinceArray = Object.keys(provinceObj).map((key) => ({
      value: key, // 使用 key 作为 id
      label: provinceObj[key], // 使用 value 作为 name
    }));
    options.value = provinceArray;
  });
};
getProvince();
//选择省份
const changeCity = (e) => {
  personnelData.value.provinceCode = e;
  getPersonnel(IndustryType.value[0].jobCode, e);
};
//颜色
function getColorForEduLevel(eduLevel) {
  const colors = {
    博士及以上: '#7f95f8',
    硕士及以上: '#4ea0f8',
    本科及以上: '#72d4b8',
    专科及以上: '#aae8a9',
    不限: '#dfe4e2',
  };
  return colors[eduLevel] || '#000000'; // 默认颜色
}
// 获取职业要求的数据
const getEducation = (data) => {
  careerNeedEdu({ code: data }).then((res) => {
    if (res.code == 20000) {
      const colors = ['#7f95f8', '#4ea0f8', '#72d4b8', '#aae8a9', '#dfe4e2'];
      const barChartData = [
        {
          name: '博士及以上',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#7BBDF5', // 对应 series 的颜色
            color: 'transparent',
          },
        },
        {
          name: '硕士及以上',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#5AB1EF', // 对应 series 的颜色
            color: 'transparent',
          },
        },
        {
          name: '本科及以上',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#9FDABF', // 对应 series 的颜色
            color: 'transparent',
          },
        },
        {
          name: '专科及以上',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#68D9A7', // 对应 series 的颜色
            color: 'transparent',
          },
        },
        {
          name: '不限',
          icon: 'circle',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#D9D9D9', // 对应 series 的颜色
            color: 'transparent',
          },
        },
      ];
      const updatedData = barChartData.map((item, index) => {
        return {
          ...item,
          name: get(res, `data.note[${index}]`, item.name), // 如果 noteList 中有对应的值，则替换，否则保留原来的 name
        };
      });

      // 构造xAxis数据
      const seriesData = updatedData.map((eduLevel) => {
        return {
          name: eduLevel.name,
          type: 'bar',
          stack: '总量', // 堆叠
          data: get(res, 'data.edu', []).map((item) => {
            // 找到对应月份的数据
            const monthData = item.y.find((d) => d.edu === eduLevel.name);
            return monthData ? monthData.ratio * 100 : 0; // 将比例转为百分比
          }),
          itemStyle: { color: getColorForEduLevel(eduLevel.name) }, // 自定义颜色
          barWidth: 20, // 设置柱宽
        };
      });
      const xData = get(res, 'data.xMarks', []).map(
        (month) => `${Number(month)}月`
      );
      // 环形饼图自定义配置
      pieChartOptions.value = {
        title: {
          text: res.data.titleForFan,
        },
        tooltip: {
          show: false,
        },
        emphasis: {
          disabled: true, // 禁用鼠标悬停的高亮效果
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: '学历要求',
            type: 'pie',
            radius: ['40%', '70%'], // 设置为环形饼图，内外半径
            top: '30',
            right: '200',
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside', // 标签位置为外部
              formatter: '{d}%\n{b}', // 显示百分比和类别
            },
            labelLine: {
              show: true,
            },
            data: res.data.eduForFan?.map((v, index) => {
              // 从 ratioStr 中去掉百分号并转为数字
              const ratio = parseFloat(v.ratioStr.replace('%', '')) || 0;

              // 使用 colors 数组中的颜色
              return {
                value: ratio, // 使用 ratio 作为 value
                name: v.edu, // edu 作为 name
                itemStyle: { color: colors[index % colors.length] }, // 使用循环的颜色
              };
            }),
          },
        ],
        // 移除可能的 xAxis 和 grid 设置
        grid: {
          show: false, // 关闭 grid
        },
        xAxis: {
          show: false, // 关闭 xAxis
        },
        yAxis: {
          show: false, // 不定义 yAxis
        },
      };
      // 堆积柱状图自定义配置
      barChartOptions.value = {
        title: {
          text: res.data.subTitle,
          textStyle: {
            fontWeight: 'normal',
            color: '#1d2129',
          },
        },
        tooltip: {
          show: false,
        },
        emphasis: {
          disabled: true, // 禁用鼠标悬停的高亮效果
        },
        legend: {
          bottom: '0%', // 将图例放在底部
          left: 'center',
          icon: 'circle', // 使用圆形图标
          textStyle: {
            color: '#666', // 图例文字颜色
          },
          formatter: function (name) {
            return name;
          },
          // 手动定义每个系列图例的样式
          data: updatedData,
          selectedMode: false, // 禁用图例的点击事件
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '18%', // 给图例留出空间，避免重叠
          top: '15%', // 给标题留出足够的空间
          containLabel: true, // 确保标签不会超出图表区域
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            interval: 0, // 强制显示每个标签
          },
        },
        yAxis: {
          type: 'value',
          data: res.data.yMarks,
          axisLabel: {
            formatter: '{value}%', // 显示百分比格式
          },
        },
        series: seriesData,
      };
    }
  });
};

//获取人才要求的数据
const getPersonnel = (code, id) => {
  personnelData.value.code = code;
  personnelData.value.provinceCode = id;
  careerNeed(personnelData.value).then((res) => {
    if (res.code == 20000) {
      recruit.value = get(res, 'data.statsHiringTrend.title', '');
      salary.value = get(res, 'data.statsSalaryTrend.title', '');
      const formattedMonths = get(res, 'data.statsHiringTrend.xMarks', []).map(
        (month) => `${Number(month)}月`
      );
      const talentData = get(res, 'data.statsHiringTrend.hiring', []).map(
        (item, index) => {
          const dataLine = item.hiringMonth.map((v) => v.y);
          const lineColor = index === 0 ? '#5f8fff' : '#cfdefe';
          return {
            name: item.year,
            type: 'line',
            smooth: true,
            symbol: 'none', // 隐藏圆圈
            itemStyle: {
              color: 'transparent',
              borderColor: lineColor,
              borderWidth: 2,
            },
            lineStyle: {
              color: lineColor,
              width: 1,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(90, 177, 239, 0.5)' },
                { offset: 1, color: 'rgba(90, 177, 239, 0)' },
              ]),
            },
            emphasis: {
              disabled: true,
            },
            data: dataLine,
          };
        }
      );
      // 折线图自定义配置
      lineChartOptions.value = {
        title: [
          {
            // 标题
            text: get(res, 'data.statsHiringTrend.subTitle', '-'),
          },
          {
            // 标题
            subtext: '单位：人',
            right: '5%',
          },
        ],
        tooltip: {
          show: false,
        },
        emphasis: {
          disabled: true, // 禁用鼠标悬停的高亮效果
        },
        legend: {
          bottom: '5%', // 使 legend 位置更靠近图表
          left: 'center',
          icon: 'circle', // 使用圆形图标
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#666',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '20%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: formattedMonths,
        },
        yAxis: {
          type: 'value',
          data: get(res, 'data.statsHiringTrend.yMarks', []), // yMarks 数组作为 Y 轴的刻度
          axisLabel: {
            formatter: function (value) {
              return value / 10000 + 'w'; // 将值转换为 'w' 单位
            },
          },
        },
        series: talentData,
      };
      const paperData = get(res, 'data.statsSalaryTrend.salary', []).map(
        (item) => {
          delete item.x;
          return Object.values(item);
        }
      );
      // 箱线图自定义配置
      boxplotOptions.value = {
        title: [
          {
            text: get(res, 'data.statsSalaryTrend.title', '-'),
          },
          {
            subtext: `单位：${get(res, 'data.statsSalaryTrend.unit', '-')}`,
            right: '5%',
          },
        ],
        tooltip: {
          show: false, // 禁用鼠标悬停时的提示框
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '20%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: get(res, 'data.statsSalaryTrend.xMarks', []), // 使用提供的 xMarks
          axisLine: {
            lineStyle: {
              color: '#ddd', // X轴线颜色
            },
          },
          axisTick: {
            show: false, // 隐藏X轴刻度线
          },
          axisLabel: {
            color: '#999', // X轴标签颜色
          },
        },
        yAxis: {
          type: 'value',
          min: 0, // Y轴的最小值为0
          axisLine: {
            show: false, // 隐藏Y轴线
          },
          axisTick: {
            show: false, // 隐藏Y轴刻度线
          },
          axisLabel: {
            formatter: function (value) {
              return value >= 10000 ? (value / 10000).toFixed(1) + 'w' : value; // 将超过10000的值转化为"w"单位
            },
            color: '#999',
          },
          splitLine: {
            lineStyle: {
              color: '#eee', // Y轴网格线颜色
            },
          },
          data: get(res, 'data.statsSalaryTrend.xMarks', []),
        },
        series: [
          {
            type: 'candlestick', // 使用K线图
            data: paperData,
            itemStyle: {
              color: 'transparent', // 使柱体为空心
              borderColor: '#F39C12', // 阳线边框颜色
              color0: 'transparent', // 阴线为空心
              borderColor0: '#F39C12', // 阴线边框颜色
              borderWidth: 1, // 边框宽度
            },
            emphasis: {
              disabled: true, // 禁用鼠标悬停时的高亮效果
            },
          },
        ],
      };
    }
  });
};
const isEmpty = (obj) => {
  return Object.keys(obj).length === 0 && obj.constructor === Object;
};
const look = () => {
  let grandson = isEmpty(changeItem.value)
    ? IndustryType.value[0]
    : changeItem.value;
  let newGrandson = {
    code: grandson.jobCode,
    name: grandson.jobName,
    children: [],
  };
  emit('changeTab', newGrandson);
};
watch(
  // 监听院校筛选数据改变
  () => userSearchDate.value,
  () => {
    requestData.page = 1;
    schoolSearchDataChange();
  }
);
// 院校筛选数据改变
function schoolSearchDataChange() {
  let searchData = {
    province: [],
    categories: [],
    features: [],
    natureType: [],
    eduLevelSchool: [],
    schoolNewly: [],
    scode: [],
    mcode: [],
    zcode: [],
    ssearch: '',
    msearch: '',
    zsearch: '',
  };

  for (let item of userSearchDate.value) {
    switch (item.type) {
      case 'province':
        searchData.province.push(item.code);
        break;
      case 'type':
        searchData.categories.push(item.code);
        break;
      case 'school_feature':
        searchData.features.push(item.code);
        break;
      case 'nature':
        searchData.natureType.push(item.code);
        break;
      case 'school_type':
        searchData.eduLevelSchool.push(item.code);
        break;
      case 'schoolNewly':
        searchData.schoolNewly.push(item.code);
        break;
      case 'schoolSearch':
        searchData.scode.push(item.code);
        break;
      case 'major':
        searchData.mcode.push(item.code);
        break;
      case 'job':
        searchData.zcode.push(item.code);
        break;
      case 'ssearch':
        searchData.ssearch = item.name;
        break;
      case 'msearch':
        searchData.msearch = item.name;
        break;
      case 'zsearch':
        searchData.zsearch = item.name;
    }
  }

  let data = {
    province: searchData.province.toString(),
    categories: searchData.categories.toString(),
    features: searchData.features.toString(),
    natureType: searchData.natureType.toString(),
    eduLevelSchool: searchData.eduLevelSchool.toString(),
    schoolNewly: searchData.schoolNewly.toString(),
    scode: searchData.scode.toString(),
    mcode: searchData.mcode.toString(),
    zcode: searchData.zcode.toString(),
    ssearch: searchData.ssearch,
    msearch: searchData.msearch,
    zsearch: searchData.zsearch,
  };
  screenData.value = data;
  fetchSearchMajorSchool();
}
const fetchSearchMajorSchool = () => {
  let data = {
    ...requestData,
    ...screenData.value,
  };

  data['zy_type'] = 3;

  getSearchMajorSchool(data).then((res) => {
    if (res.code == 20000) {
      tableData.value = res.data;
      total.value = res.total;
    }
  });
};
const handleUpdateCollegeList = (code) => {
  requestData.code = code;
  fetchSearchMajorSchool();
};
const handleClick = (tab) => {
  activeName.value = tab.paneName;
};
const jobChange = (item, index) => {
  current.value = index;
  changeItem.value = item;
  getEducation(item.jobCode);
  getPersonnel(item.jobCode, get(personnelData.value, 'provinceCode', '0'));
};
const handleCurrentChange = (val) => {
  requestData.page = val;
  fetchSearchMajorSchool();
};
const handleSizeChange = (val) => {
  requestData.pageSize = val;
  fetchSearchMajorSchool();
};
fetchSearchMajorSchool();
// 处理热度展示
const formatHits = (hits) => {
  if (isNaN(hits)) {
    return '0万'; // 防止数据异常
  }
  return new Intl.NumberFormat('en-US').format(hits) + '万';
};
watch(
  () => props.majorCode,
  (newValue) => {
    if (newValue) {
      getMajorJob();
    }
  }
);
defineExpose({
  handleUpdateCollegeList,
});
</script>

<style lang="scss" scoped>
.left-tree {
  width: 260px;
  margin-right: 30px;
}
.right-contaier {
  background: #fff7f4;
  height: 120px;
  flex: 1;
  .like-box {
    padding: 15px;
    height: 100%;
    justify-content: space-between;
  }
}
.my-btn {
  width: 80px;
  border-radius: 4px;
  justify-content: center;
  color: #409eff;
  border: 1px solid #409eff;

  &:hover {
    background: #409eff;
    color: #fff;
  }
}
.sketch-info {
  width: 780px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .sketch {
    display: flex;
    align-items: center;
  }
  .item {
    color: #9b9b9b;
    margin-top: 10px;
  }
  img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
}
.item-box {
  margin: 40px 0;
}
.tabs-box {
  :deep(.el-tabs__active-bar) {
    height: 0px !important;
  }
  :deep(.el-tabs__nav-wrap::after) {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #409eff;
    z-index: #409eff;
  }
  :deep(.is-active) {
    background: #409eff;
    color: #fff;
    border-radius: 4px;
  }
  :deep(.el-tabs__item) {
    padding: 0 30px;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.treeActive {
  color: #409eff;
}
.major-item:hover {
  color: #409eff;
}

// 就业前景
.education {
  margin-bottom: 40px;
  .education-echarts-box {
    display: flex;
    margin-top: 20px;
  }
  .ttx {
    line-height: 30px;
    font-size: 15px;
    color: #4e5969;
  }
  .job-list-container {
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: space-between;
    .job-list-item {
      width: 120px;
      height: 84px;
      padding: 16px 10px 8px 10px;
      border-radius: 4px;
      border: 1px solid #e7e7e7;
      margin-bottom: 11px;
      cursor: pointer;
      position: relative;
      .job-name {
        color: var(--text-primary-color);
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        margin-bottom: 10px;
      }
      .job-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .job-text {
          display: flex;
          flex-direction: column;
          span {
            font-size: 12px;
            color: var(--text-secondary-color);
            line-height: 16px;
          }
        }
        .job-ratio {
          font-size: 24px;
          font-family: Bebas;
          font-weight: 400;
          color: var(--text-primary-color);
          line-height: 24px;
        }
      }
      .text-overflow-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &.active {
        background: #f5f9ff;
        border-color: #f5f9ff;
        .job-name,
        .job-ratio {
          color: var(--primary-color);
        }
        .job-text {
          span {
            color: var(--primary-color);
          }
        }
        &::after {
          content: '';
          margin: 7px auto 0;
          display: block;
          width: 0;
          height: 0;
          border: 8px solid;
          border-width: 8px 7px 8px 7px;
          border-color: #f5f9ff;
          border-left-color: transparent;
          border-bottom-color: transparent;
          border-right-color: transparent;
        }
      }
    }
  }
}
.view-introduction {
  border-radius: 2px;
  line-height: 40px;
  color: #165dff;
  border: 1px solid #165dff;
  cursor: pointer;
  width: 126px;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  &:hover {
    color: #165dff;
    border-color: #b9ceff;
    background-color: #e8efff;
  }
}

.el-tab-pane {
  padding: 0 30px !important;
}
.disabled {
  background: #fafafa;
  cursor: not-allowed !important; /* 显示禁止选择的鼠标样式 */
  user-select: none !important; /* 禁止文本选择 */
  -webkit-user-select: none !important; /* 兼容 Webkit 内核浏览器 (Safari, Chrome) */
  -moz-user-select: none !important; /* 兼容 Firefox */
  -ms-user-select: none !important;
  border: none !important;
}
</style>
